<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-statistic-card ant-pro-card-border ant-pro-card-contain-card"
    >
      <div
        class="ant-pro-card-body"
        style="padding: 0px;"
      >
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content "
              >
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Total Traffic (Visits)
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              601,986,875
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-divider ant-pro-card-divider-vertical"
        />
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content  ant-pro-statistic-card-content-horizontal"
              >
                <div
                  class="ant-pro-statistic-card-chart ant-pro-statistic-card-chart-left"
                >
                  <img
                    alt="Percentage"
                    src="https://gw.alipayobjects.com/zos/alicdn/ShNDpDTik/huan.svg"
                    width="100%"
                  />
                </div>
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Paid Traffic
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              3,701,928
                            </span>
                          </span>
                        </div>
                      </div>
                      <div
                        class="ant-pro-card-statistic-description"
                      >
                        <div
                          class="ant-pro-card-statistic"
                        >
                          <div
                            class="ant-pro-card-statistic-wrapper"
                          >
                            <div
                              class="ant-pro-card-statistic-content"
                            >
                              <div
                                class="ant-statistic ant-pro-card-statistic-layout-inline"
                              >
                                <div
                                  class="ant-statistic-title"
                                >
                                  Proportion
                                </div>
                                <div
                                  class="ant-statistic-content"
                                >
                                  <span
                                    class="ant-statistic-content-value"
                                  >
                                    61.5%
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col"
        >
          <div
            class="ant-pro-card ant-pro-statistic-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-pro-statistic-card-content  ant-pro-statistic-card-content-horizontal"
              >
                <div
                  class="ant-pro-statistic-card-chart ant-pro-statistic-card-chart-left"
                >
                  <img
                    alt="Percentage"
                    src="https://gw.alipayobjects.com/zos/alicdn/6YR18tCxJ/huanlv.svg"
                    width="100%"
                  />
                </div>
                <div
                  class="ant-pro-card-statistic"
                >
                  <div
                    class="ant-pro-card-statistic-wrapper"
                  >
                    <div
                      class="ant-pro-card-statistic-content"
                    >
                      <div
                        class="ant-statistic ant-pro-card-statistic-layout-vertical"
                      >
                        <div
                          class="ant-statistic-title"
                        >
                          Free Traffic
                        </div>
                        <div
                          class="ant-statistic-content"
                        >
                          <span
                            class="ant-statistic-content-value"
                          >
                            <span
                              class="ant-statistic-content-value-int"
                            >
                              1,806,062
                            </span>
                          </span>
                        </div>
                      </div>
                      <div
                        class="ant-pro-card-statistic-description"
                      >
                        <div
                          class="ant-pro-card-statistic"
                        >
                          <div
                            class="ant-pro-card-statistic-wrapper"
                          >
                            <div
                              class="ant-pro-card-statistic-content"
                            >
                              <div
                                class="ant-statistic ant-pro-card-statistic-layout-inline"
                              >
                                <div
                                  class="ant-statistic-title"
                                >
                                  Proportion
                                </div>
                                <div
                                  class="ant-statistic-content"
                                >
                                  <span
                                    class="ant-statistic-content-value"
                                  >
                                    38.5%
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        StatisticCard ChartPlacement Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            statistic.title
          </strong>
          : 统计项标题
        </li>
        <li>
          <strong>
            statistic.value
          </strong>
          : 统计数值
        </li>
        <li>
          <strong>
            statistic.description
          </strong>
          : 统计描述，可以是 Statistic 组件
        </li>
        <li>
          <strong>
            chart
          </strong>
          : 图表区域
        </li>
        <li>
          <strong>
            chartPlacement
          </strong>
          : 图表位置，'left' 表示左侧，'right' 表示右侧
        </li>
      </ul>
      <h4>
        ChartPlacement 属性说明：
      </h4>
      <ul>
        <li>
          <strong>
            left
          </strong>
          : 图表显示在左侧，统计信息显示在右侧
        </li>
        <li>
          <strong>
            right
          </strong>
          : 图表显示在右侧，统计信息显示在左侧
        </li>
        <li>
          <strong>
            默认值
          </strong>
          : 不设置时图表默认显示在右侧
        </li>
      </ul>
      <h4>
        嵌套 Statistic 组件：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 子统计项标题
        </li>
        <li>
          <strong>
            value
          </strong>
          : 子统计项数值
        </li>
      </ul>
      <h4>
        响应式布局特点：
      </h4>
      <ul>
        <li>
          <strong>
            断点控制
          </strong>
          : 当容器宽度小于 596px 时切换为垂直布局
        </li>
        <li>
          <strong>
            分割线适配
          </strong>
          : 根据布局方向自动调整分割线类型
        </li>
        <li>
          <strong>
            图表适配
          </strong>
          : 图表会根据容器大小自动调整
        </li>
      </ul>
      <h4>
        布局效果：
      </h4>
      <ul>
        <li>
          <strong>
            左侧图表
          </strong>
          : 图表在左侧，统计信息在右侧，适合强调图表
        </li>
        <li>
          <strong>
            右侧图表
          </strong>
          : 统计信息在左侧，图表在右侧，适合强调数据
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 在小屏幕上自动调整为垂直布局
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            数据对比
          </strong>
          : 展示不同类别的数据对比
        </li>
        <li>
          <strong>
            比例展示
          </strong>
          : 展示各部分占总体的比例
        </li>
        <li>
          <strong>
            趋势分析
          </strong>
          : 结合图表展示数据趋势
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            图表选择
          </strong>
          : 根据数据类型选择合适的图表类型
        </li>
        <li>
          <strong>
            布局平衡
          </strong>
          : 合理分配图表和统计信息的空间
        </li>
        <li>
          <strong>
            视觉层次
          </strong>
          : 通过布局突出重要的信息
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>